<template>
	<jk-dialog
		v-model="showDialog"
		title="详情-保养"
		width="900px"
		:show-content-loading="showLoading"
		append-to-body
		:show-close-btn="true"
		:show-confirm-btn="false"
		:show-cancel-btn="false"
		@on-close="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
	>
		<div ref="box1">
			<el-form ref="ruleForm" :model="ruleForm" label-width="120px" :show-message="false">
				<el-tabs type="border-card">
					<el-tab-pane label="基本信息">
						<span slot="label"><i class="el-icon-tickets"></i> 基本信息</span>
						<jk-card class="margin-bottom-20">
							<el-row class="flex-start-center-wrap">
								<el-col :span="12">
									<el-form-item class="margin-bottom-10" label="任务单号">
										<span class="read-only-2">{{ ruleForm.code }}</span>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item class="margin-bottom-10" label="设备">
										<span class="read-only-2">{{ ruleForm.machineCode }}</span>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item class="margin-bottom-10" label="项目">
										<span class="read-only-2">{{ ruleForm.upkeepItemName }}</span>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item class="margin-bottom-10" label="周期">
										<span class="read-only-2">{{ transferCircleUnit(ruleForm) }}</span>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item class="margin-bottom-0" label="保养分类">
										<span class="read-only-2">{{ ruleForm.upkeepTypeName }}</span>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item class="margin-bottom-0" label="上次保养时间">
										<span class="read-only-2">{{ ruleForm.lastTime || '无' }}</span>
									</el-form-item>
								</el-col>
							</el-row>
						</jk-card>
						<div class="margin-bottom-4 flex-between-center">
							<el-tag type="primary" effect="plain">
								<span class="el-icon-brush item-gap"></span>
								<span>保养信息</span>
							</el-tag>
							<el-alert :closable="false" :show-icon="true" type="info" size="mini" style="width: 340px;">{{ ruleForm.empName ? `计划：${ruleForm.empName} ${ruleForm.planUpkeepTime}` : `计划时间：${ruleForm.planUpkeepTime}` }}</el-alert>
						</div>
						<jk-card class="">
							<el-row class="flex-start-center-wrap">
								<el-col :span="12">
									<el-form-item class="margin-bottom-10" label="实际开始时间" prop="actualStartTime">
										<span class="read-only-2">{{ ruleForm.actualStartTime || '无' }}</span>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item class="margin-bottom-10" label="实际结束时间" prop="actualEndTime">
										<span class="read-only-2">{{ ruleForm.actualEndTime || '无' }}</span>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item class="margin-bottom-10" label="实际保养人" prop="actualUpkeepEmpId">
										<span class="read-only-2">{{ ruleForm.actualUpkeepEmpName || '无' }}</span>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item class="margin-bottom-0" label="说明">
										<el-input v-model="ruleForm.actualUpkeepDescription" disabled type="textarea" placeholder="说明"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-divider><i class="el-icon-date item-gap"></i>下次计划</el-divider>
							<el-row>
								<el-col :span="12">
									<el-form-item class="margin-bottom-0" label="计划下次时间" prop="nextPlanTime">
										<span class="read-only-2">{{ ruleForm.nextPlanTime || '无' }}</span>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item class="margin-bottom-0" label="下次保养人" prop="nextPlanUpkeepEmpId">
										<span class="read-only-2">{{ ruleForm.nextPlanUpkeepEmpName || '无' }}</span>
									</el-form-item>
								</el-col>
							</el-row>
						</jk-card>
					</el-tab-pane>
					<!--<el-tab-pane label="配件信息">
						<span slot="label"><i class="el-icon-collection-tag"></i> 配件信息</span>
						<el-button class="margin-bottom-4" icon="el-icon-plus" size="mini">添加</el-button>
						<jk-table :data="tableData" border :height="260">
							<vxe-table-column field="productName" title="配件" :min-width="90" align="left"></vxe-table-column>
							<vxe-table-column field="upkeepItemName" title="规格型号" :min-width="100" align="left"></vxe-table-column>
							<vxe-column title="数量" align="right" field="qty" :min-width="100">
								<template slot-scope="scope">
									<div class="flex-center">
										<jk-number-input v-model="scope.row.upkeepState" size="mini" class=""></jk-number-input>
									</div>
								</template>
							</vxe-column>
							<vxe-column title="操作" align="center" fixed="right" :width="80">
								<template slot-scope="scope">
									<div class="flex-center">
										<el-button size="mini" class="" type="danger" icon="el-icon-delete"></el-button>
									</div>
								</template>
							</vxe-column>
						</jk-table>
					</el-tab-pane>-->
				</el-tabs>
			</el-form>
		</div>
	</jk-dialog>
</template>

<script>
    import { machineManagerUpkeepMachineJobGet } from '../../../../api/machine/upkeepTask';
    import upkeepMixin from './upkeep';
    import { clearRedundancyKey } from '../../../../utils/jk/jk-tool';
    export default {
        mixins: [upkeepMixin],
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            dataId: {
                type: [String, Number],
                default: ''
            }
        },
        data() {
            return {
                showDialog: false,
                showLoading: true,
                ruleForm: {}
            };
        },
        methods: {
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                    this.$nextTick(() => {
                        this.$refs.ruleForm.resetFields();
                    });
                }
            },
            getDetailRequest() {
                this.showLoading = true;
                return machineManagerUpkeepMachineJobGet({ id: this.dataId }).then(res => {
                    this.showLoading = false;
                    if (res.data.status === 200) {
                        this.ruleForm = res.data.res || {};
                    }
                });
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.getDetailRequest();
                }
            }
        }
    };
</script>
